<template>
<div class="xyt-talk-win-list" v-if="show">
  <div class="xyt-header flex" @click="close">
    <img src="../../assets/img/back.png" alt="">
    <div class="flex-1">{{ chat.chat.name }}</div>
    <div class="c-grey">七天后聊天自动消失</div>
  </div>
  <div class="xyt-talk-win" ref="talkWin">
    <!-- <img src="../../assets/img/bj.png" class="bg" alt=""> -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div ref="chatListBox" class="xyt-chat-list">
        <template v-for="(chat, index) in chatList" :key="index">
          <div v-if="chat.type === 'time'" class="xyt-talk-time-box">
            <div class="xyt-talk-time">{{ chat.time }}</div>
          </div>
          <div v-else-if="chat.type === 'message' && chat.id === userInfoStore.userInfo.external_user_id" class="xyt-talk-win-own">
            <div class="message-box">
              <div class="name">
                <div class="tag">
                  <span v-if="chat.year" >{{ chat.year }}年</span>
                  <span v-if="chat.school" >{{ chat.school }}</span>
                </div>
                <img class="sex" v-if="chat.gender === 2" src="./../../assets/img/girl.png" />
                <img class="sex" v-if="chat.gender === 1" src="./../../assets/img/boy.png" />
                <span>{{ chat.name }}</span>
              </div>
              <div class="flex-1"><span class="xyt-fly-tag" v-if="chat.isFly">[纸飞机]</span>{{ chat.content }}</div>
            </div>
            <!-- <div class="flex-1">
              <span class="xyt-fly-tag" v-if="chat.isFly">[纸飞机]</span> {{ chat.content }}
            </div> -->
            <div class="avatar">
              <img :src="chat.avatar || '/assets/avatar.png'" alt="">
            </div>
          </div>
          <div v-else class="xyt-talk-win-other">
            <div class="avatar">
              <img :src="chat.avatar || '/assets/avatar.png'" alt="">
            </div>
            <div class="message-box">
              <div class="name">
                <span>{{ chat.name }}</span>
                <img class="sex" v-if="chat.gender === 2" src="./../../assets/img/girl.png" />
                <img class="sex" v-if="chat.gender === 1" src="./../../assets/img/boy.png" />
                <div class="tag">
                  <span v-if="chat.year" >{{ chat.year }}年</span>
                  <span v-if="chat.school" >{{ chat.school }}</span>
                </div>
              </div>
              <div class="flex-1"><span class="xyt-fly-tag" v-if="chat.isFly">[纸飞机]</span>{{ chat.content }}</div>
            </div>
            <!-- <div class="flex-1">
              <span class="xyt-fly-tag" v-if="chat.isFly">[纸飞机]</span> {{ chat.content }}
            </div> -->
          </div>
        </template>
      </div>
    </van-pull-refresh>
  </div>
  <div class="xyt-reply-box flex">
    <div class="flex-1">
      <van-field v-model="replyContent" placeholder="说说你想说的~"></van-field>
    </div>
    <div>
      <van-button type="success" @click="sendMessage">发送</van-button>
    </div>
  </div>
</div>
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { queryChatMsgs, addChatMsg } from './../../api/fly.js'
import { useUserInfo } from './../../stores/userInfo.js'
import { ws, joinRoom, getMessageTime, leaveRoom } from './../../utils/utils.js'

let show = ref(false)
let chat = ref({})
let form = reactive({
  page_no: 1,
  page_size: 50,
  chat_id: ''
})

let userInfoStore = useUserInfo()
let chatList = ref([])
let replyContent = ref('')
let loading = ref(false)
let talkWin = ref()
let chatListBox = ref()
let refresh = false
let baseTime = new Date().getTime()

function onRefresh() {
  refresh = true
  getChatList()
}

function open(chatInfo) {
  form.page_no = 1
  chatList.value.length = 0
  chat.value = chatInfo
  show.value = true
  if (!userInfoStore.userInfo) {
    userInfoStore.setUserInfo(JSON.parse(sessionStorage.getItem("userInfo")))
  }
  // 加入房间
  ws && ws.on('CHAT_MSG', wsChatMsg)
  joinRoom(chat.value.chat.chat_id)
  getChatList()
}
function close() {
  ws && ws.off('CHAT_MSG', wsChatMsg)
  leaveRoom(chat.value.chat.chat_id)
  show.value = false
}
defineExpose({
  open
})

async function getChatList() {
  form.chat_id = chat.value.chat.chat_id
  const res = await queryChatMsgs(form)
  loading.value = false
  form.page_no += 1
  for (let i = 0; i < res.result.items.length; i++) {
    const item = res.result.items[i];
    let time = getMessageTime(item.create_time, baseTime)
    if (time) {
      baseTime = item.create_time
      chatList.value.unshift({
        type: 'time',
        time: time,
      })
    }
    chatList.value.unshift({
      type: 'message',
      id: item.msg_by,
      avatar: item.icon_url,
      content: item.content,
      isFly: false,
      name: item.name,
      year: item.year,
      school: item.school,
      gender: item.gender,
    })
  }
  baseTime = new Date().getTime()
  if (!refresh) {
    nextTick(() => {
      resizeWinOffsetHeight()
    })
  }
}
// 发送消息
async function sendMessage() {
  const res = await addChatMsg({
    chat_id: chat.value.chat.chat_id,
    content: replyContent.value
  })
  replyContent.value = ''
}

// ws消息处理
function wsChatMsg(data) {
  if (data) {
    switch (data.reason) {
      case 'ADD':
        let time = getMessageTime(new Date().getTime(), baseTime)
        if (time) {
          baseTime = data.body.create_time
          chatList.value.push({
            type: 'time',
            time: time,
          })
        }
        chatList.value.push({
          type: 'message',
          id: data.body.msg_by,
          avatar: data.body.icon_url,
          content: data.body.content,
          isFly: false,
          name: data.body.name,
          year: data.body.year,
          school: data.body.school,
          gender: data.body.gender,
        })
        resizeWinOffsetHeight()
        break;
    
      default:
        break;
    }
  }
}

function resizeWinOffsetHeight() {
  nextTick(() => {
    talkWin.value.scrollTop = chatListBox.value.clientHeight - talkWin.value.clientHeight
  })
}

onMounted(() => {
})
onUnmounted(() => {
  ws && ws.off('CHAT_MSG', wsChatMsg)
  leaveRoom(chat.value.chat.chat_id)
})
</script>
<style scoped lang="scss">
.xyt-talk-win-list {
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  .xyt-header {
    background-color: #fff;
    line-height: 40px;
    color: #333;
    padding: 0 10px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    img {
      width: 12px;
      height: 14px;
      vertical-align: top;
      margin-top: 13px;
    }
    .flex-1 {
      font-weight: bold;
    }
    .c-grey {
      color: #c5c5c5;
      font-size: 12px;
    }
  }
}
.xyt-talk-win {
  position: absolute;
  left: 0;
  top: 45px;
  right: 0;
  bottom: 45px;
  overflow: auto;
  .bg {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}
.xyt-talk-winer {
  padding: 8px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  align-items: center;
  .flex-1 {
    padding-left: 8px;
  }
  .avatar {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .school {
    color: #999;
  }
  .status {
    color: #48cd8f;
    i {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #48cd8f;
      vertical-align: middle;
      margin-right: 6px;
    }
  }
}
.xyt-chat-list {}
.xyt-talk-win-own {
  padding: 8px;
  text-align: right;
  .avatar {
    display: inline-block;
    margin-left: 6px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .flex-1 {
    display: inline-block;
    max-width: calc(100%);
    min-width: 100px;
    vertical-align: top;
    text-align: left;
    padding: 8px;
    margin-left: 6px;
    background: #a9e87a;
    border-radius: 10px 0px 10px 10px;
    color: #333;
  }
}
.xyt-talk-win-other {
  padding: 8px 50px 8px 8px;
  .avatar {
    display: inline-block;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: top;
    }
  }
  .flex-1 {
    display: inline-block;
    max-width: calc(100%);
    min-width: 100px;
    vertical-align: top;
    text-align: left;
    background: #FFFFFF;
    border-radius: 0px 10px 10px 10px;
    padding: 8px;
    margin-left: 6px;
  }
}
.xyt-fly-tag {
  font-weight: bold;
  word-break: break-all;
}
.xyt-reply-box {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  border-top: 1px solid #f0f0f0;
}
.xyt-talk-time-box {
  text-align: center;
}
.xyt-talk-time {
  display: inline-block;
  height: 16px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
}
.message-box {
  display: inline-block;
  max-width: calc(100% - 50px);
  min-width: 100px;
  vertical-align: top;
}
.message-box .name {
  display: block;
  text-align: right;
  color: #999;
  font-size: 12px;
  margin-bottom: 4px;
}
.message-box .sex {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin: 0 3px;
}
.message-box .tag {
  display: inline-block;
}
.message-box .tag span {
  display: inline-block;
  text-align: left;
  color: #fff;
  font-size: 12px;
  vertical-align: top;
  margin-left: 4px;
  background-color: #80d9b0;
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 25px;
  text-align: center;
}
.xyt-talk-win-other .message-box {
  display: inline-block;
  max-width: calc(100% - 50px);
  min-width: 100px;
  vertical-align: top;
  text-align: left;
}
.xyt-talk-win-other .message-box .name {
  text-align: left;
  color: #999;
  font-size: 12px;
  vertical-align: top;
  margin-left: 4px;
}
.xyt-talk-win-other .message-box .tag {
  display: inline-block;
}
.xyt-talk-win-other .message-box .tag span {
  display: inline-block;
  text-align: left;
  color: #fff;
  font-size: 12px;
  vertical-align: top;
  margin-left: 4px;
  background-color: #80d9b0;
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 25px;
  text-align: center;
}
</style>